<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Dijit Cell Editors</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dojo/resources/dojo.css";
			@import "../../dijit/themes/claro/claro.css";
			@import "../css/skins/claro.css";
			.heading {
				font-weight: bold;
				padding-bottom: 0.25em;
			}
			#grid .field-date, #grid .field-date2 {
				width: 16em;
			}
			#grid .field-integer {
				width: 6em;
			}
			#grid .field-bool {
				width: 6em;
			}
			.ui-widget{
				margin: 10px;
			}
		</style>
		<script src="../../dojo/dojo.js" 
			data-dojo-config="async: true, isDebug: true"></script>
		<script>
			require(["dgrid/List", "dgrid/OnDemandGrid", "dgrid/Selection", "dgrid/Keyboard", "dgrid/editor", "dijit/form/DateTextBox", "dijit/form/HorizontalSlider", "dijit/form/NumberSpinner", "dojo/_base/declare", "dgrid/test/data/base", "dojo/domReady!"],
				function(List, Grid, Selection, Keyboard, editor, DateTextBox, Slider, NumberSpinner, declare){
					var columns = [
						editor({label: 'A Date (editable if after 1999)', field: 'date', canEdit: function(object, value){
							return value.getFullYear() >= 2000;
						} }, DateTextBox),
						editor({label: 'Real Number', field: 'floatNum'}, Slider),
						editor({label: 'Integer', field: 'integer',
								editorArgs: {style: 'width: 5em;', constraints: {min:0, max:1550, places:0}}},
							NumberSpinner),
						editor({label: 'Text editable if checkbox checked + saved', field: 'text', canEdit: function(object){
							return object.bool;
						}}, "text", "dblclick"),
						{label: 'Non-editable text', field: 'text2', sortable: false},
						editor({label: 'Another Date', field: 'date2'}, DateTextBox, "dgrid-cellfocusin"),
						editor({label: 'CheckBox', field: 'bool'}, "checkbox")
					];

					window.grid = new (declare([Grid, Selection, Keyboard]))({
						store: testTypesStore,
						columns: columns,
						selectionMode: "single"
					}, "grid");
					
					grid.on("dgrid-datachange", function(evt){
						console.log("data changed: ", evt.oldValue, " -> ", evt.value);
						console.log("cell: ", evt.cell, evt.cell.row.id);
					});
					grid.on("dgrid-editor-show", function(evt){
						console.log("show editOn editor: ", evt);
					});
					grid.on("dgrid-editor-hide", function(evt){
						console.log("hide editOn editor: ", evt);
					});
					
					grid.on(".field-integer:dgrid-datachange", function(evt){
						if(evt.value > 1000){
							evt.preventDefault();
							alert("Values above 1000 will be rejected");
							// log data on a timeout to demonstrate that value wasn't changed
							setTimeout(function(){
								console.log("integer after prevented event:",
									evt.cell.row.data.integer);
							}, 0);
						}
					});
				});
				
		</script>
	</head>
	<body class="claro">
		<h2>A basic grid with editors</h2>
		(This test requires dijit to be installed)	
		<div id="grid"></div>
		<button type="button" id="save" onclick="grid.save()">Save</button>
	</body>
</html>
